<template>
  <div class="app-container record">
    <div class="content">
      <ul class="list">
        <li class="item" v-for="(item,index) in list" :key="index">
          <div class="item-name">
            <span class="name-label-video" v-if="index/2 !=1">[视频]</span>
            <span class="name-label-music" v-else>[音频]</span>
            <span class="name">俄罗斯的阳光、绿茵、足球还不够？我们这里有大汉堡、小姐姐...</span>
          </div>
          <span class="item-time">2018年9月30日 16:05</span>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:["list"],
  data() {
    return {
      currentPage: 1
    };
  },
  components: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="less" scoped>
.record {
  width: 100%;
  .content {
    padding: 0px 20px 20px 20px;
    border-radius: 10px;
    background: #fff;
    .list {
      padding: 0px;
      margin-bottom: 30px;
      .item {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #eaeaea;
        span {
          display: inline-block;
        }
        .item-name {
          font-size: 18px;
          overflow: hidden;
          .name-label-video {
            color: #15c798;
            float: left;
          }
          .name-label-music {
            color: #8ee6cf;
            float: left;
          }
          .name {
            float: left;
            width: 550px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .item-time {
          font-size: 16px;
          color: #a1a1a1;
        }
      }
    }
  }
}
</style>


